<template>
  <div ref="el">
    <ul ref="listEl">
      <li>这是 li</li>
    </ul>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from "vue";
import * as d3 from "d3-selection";

export default defineComponent({
  name: "D3Selection",
  setup() {
    const el = ref(null)
    const listEl = ref(null)
    onMounted(() => {
      d3.select(listEl.value).selectAll('li')
          .data([1, 2, 3, 4, 5]).text((d) => {
        return d;
      }).enter().append('li').text(function (d) {
        console.log(d, this)
        return d;
      })

      d3.selectAll("li")
          .data([10, 20, 30, 15])
          .exit()
          .remove()

      d3.select(listEl.value).selectAll("li")
          .data([100, 200, 300, 105, 1011])
          .join((enter) => {
            return enter.append('li').text(d => d)
          }, (update) => {
            return update.text(d => d)
          }, (exit) => {
            console.log('exit:', exit)
            return exit.remove()
          })

      d3.select(el.value)
          .append('h1')
          .text('sss')
          .style("color", "red")
          .attr("data-val", 123)
          .classed('h3', true)
    })
    return {el, listEl}
  }
})
</script>

<style scoped>

</style>
